<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 270px;
				height: 180px;
				margin: 0 auto;
				margin-top: 30px;
			}
			.box button{
				width: 84px;
				height: 30px;
			}
			.box div{
				width: 270px;
				height: 150px;
				background: pink;
				display: none;
				font-size: 50px;
				text-align: center;
				line-height: 150px;
			}
			.box button.active{
				background: red;
			}
			.box div.show{
				display: block;
			}
			
			
		</style>
	</head>
	<body>
		
		<div id="box" class="box">
			<button class="active">按钮一</button>
			<button>按钮二</button>
			<button>按钮三</button>
			<div class="show">内容一</div>
			<div>内容二</div>
			<div>内容三</div>
		</div>
		
		
		
		<div id="box2" class="box">
			<button class="active">按钮一</button>
			<button>按钮二</button>
			<button>按钮三</button>
			<div class="show">内容一</div>
			<div>内容二</div>
			<div>内容三</div>
		</div>		
		
	</body>
<script type="text/javascript">

class Tab{
	constructor(str){
		this.parent=document.querySelector(str);
		this.aBtn=this.parent.querySelectorAll('button');
		this.aDiv=this.parent.querySelectorAll('.box div');		
		this.show();
	}
	
	show(){
		let _this=this;
		for(let i=0;i<this.aBtn.length;i++){
			this.aBtn[i].onclick=function(){
				_this.index=i
				_this.fn(i)
			}
		}
	}
	
	
	fn(i){
		for(var j=0;j<this.aDiv.length;j++){
			this.aBtn[j].className='';
			this.aDiv[j].className='';
		}
		this.aBtn[i].className='active';
		this.aDiv[i].className='show';
	}

}
class AutoPlayTab extends Tab{
	constructor(str){
		super(str);
		this.autoFn();
		this.index=0
	}
	autoFn(){
		var _this=this;
		
		setInterval(function(){
			_this.index++;
			if(_this.index==_this.aBtn.length){
				_this.index=0
			}
			_this.fn(_this.index)
		},1000)
	}
}


window.onload=function(){
	new Tab('#box');
	new AutoPlayTab('#box2');
}
	
	
	
	
</script>
</html>
